<template>
  <div class="rank-list">
    <div class="header">
      <h2>排行榜</h2>
    </div>

    <div class="rank-container">
      <!-- 官方榜 -->
      <div class="official-rank">
        <h3>官方榜</h3>
        <div class="rank-grid">
          <el-card
            v-for="rank in officialRanks"
            :key="rank.rankId"
            class="rank-card"
            @click="goToRankDetail(rank.rankId)"
          >
            <div class="rank-header">
              <img
                :src="rank.rankPic || rankDefaultImage"
                :alt="rank.rankTitle"
                @error="handleImageError"
              />
              <div class="rank-update-time">{{ rank.updateTime }}</div>
            </div>
            <div class="rank-songs">
              <div
                v-for="(song, index) in rank.songs"
                :key="song.songId"
                class="rank-song"
              >
                <span class="rank-index" :class="{ top: index < 3 }">{{ index + 1 }}</span>
                <span class="song-name">{{ song.songName }}</span>
                <span class="song-singer">- {{ song.singerName }}</span>
              </div>
            </div>
          </el-card>
        </div>

        <div class="pagination" v-if="officialRanks.length > 0">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              layout="prev, pager, next, jumper, ->, total"
              @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import defaultImage from '@/assets/img/rank-default.png'
import { getRankList } from '@/services/rank'

export default {
  name: 'RankList',
  setup() {
    const router = useRouter()

    const rankDefaultImage = defaultImage

    // 分页相关
    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)

    // 数据状态
    const officialRanks = ref([])
    const loading = ref(false)

    // 获取排行榜列表
    const fetchRanks = async () => {
      try {
        loading.value = true
        const params = {
          pageNum: currentPage.value,
          pageSize: pageSize.value
        }

        const response = await getRankList(params)
        if (response.code === '1') {
          officialRanks.value = response.data.list || response.data.records || []
          total.value = response.data.total || 0
        }else {
          ElMessage.error(response.message || '获取排行榜失败')
        }
      } catch (error) {
        ElMessage.error('获取排行榜失败: ' + error.message)
      } finally {
        loading.value = false
      }
    }

    // 跳转到排行榜详情页
    const goToRankDetail = (rankId) => {
      router.push(`/rank/${rankId}`)
    }

    // 处理分页变化
    const handlePageChange = (page) => {
      currentPage.value = page
      fetchRanks()
    }

    // 处理图片加载错误
    const handleImageError = (e) => {
      e.target.src = '/img/default_rank.png'
    }

    // 初始化加载
    onMounted(() => {
      fetchRanks()
    })

    return {
      officialRanks,
      loading,
      currentPage,
      pageSize,
      total,
      rankDefaultImage,
      handlePageChange,
      goToRankDetail,
      handleImageError
    }
  }
}
</script>

<style scoped>
.rank-list {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.rank-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.rank-container h3 {
  margin: 0 0 15px 0;
  font-size: 20px;
  color: #333;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.rank-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.rank-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rank-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.rank-card.small {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.rank-header {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 4px;
}

.rank-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rank-update-time {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  font-size: 12px;
  text-align: right;
}

.rank-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  font-size: 14px;
  text-align: center;
}

.rank-songs {
  padding: 10px 0;
}

.rank-song {
  display: flex;
  align-items: center;
  padding: 5px 0;
  font-size: 14px;
}

.rank-song:hover {
  background: #f5f5f5;
}

.rank-index {
  width: 20px;
  text-align: center;
  color: #999;
  font-size: 12px;
}

.rank-index.top {
  color: #ff6b6b;
  font-weight: bold;
}

.song-name {
  flex: 1;
  margin: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
}

.song-singer {
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
